<template>
  <div>
    <van-row>
    <van-col span="8"></van-col>
    <van-col span="11">
    
    </van-col>
    <van-col span="5">
        <van-button  round size="small" @click="show2bloComment()"> 评论</van-button>
    </van-col>
    </van-row>
  

        <!-- 评论2故事 -->
         <van-popup v-model="show" position="bottom" closeable :style="{ height: '20%' }" >
            <div>
                                <!-- 输入任意文本 -->
                <van-field v-model="value" label="评论："
                autosize
                type="textarea"
                placeholder="请输入评论内容"
                />
                <van-row>
                <van-col span="8"></van-col>
                <van-col span="8">
                    <van-button round type="info" size="small" @click="toBlogComment()">提交评论</van-button>
                </van-col>
                <van-col span="8"></van-col>
                </van-row>
            </div>
        </van-popup>

        <van-pull-refresh v-model="isLoading" :disabled="finished" @refresh="onRefresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                <BlogCommentPage2List
                v-for="item in list"
                :key="item.commentId"
                :CommentId="item.commentId"
                :UserId="item.userId"
                :UserName="item.userName"
                :UserIcon="item.userIcon"
                :BlogId="item.blogId"
                :CommentText="item.commentText"
                :CountLike = "item.countLike"
                :AddTime = "item.addTime"
                >
                </BlogCommentPage2List>
            
                <!-- ></Musicpage2list> -->

            </van-list>
        </van-pull-refresh>
  </div>
</template>

<script>
import BlogCommentPage2List from './BlogCommentPage2List.vue'
import BlogCommentAPI from '@/api/BlogCommentAPI';
export default {
  components: { BlogCommentPage2List },
name: "BlogCommentList",

data() {
        return {
            list: [],
            blogId: "",
            value:"",
            show: false,
            loading: false,
           finished: false,
                 // 是否正在下拉刷新
           isLoading: false,
               // 页码
            pageNumber: 0,
            // 页大小
            pageSize: 8,
            // 当前页码
            current: 0,
            // 总条数
            total: 0,
           TbBlogComment: {
                commentId: '',
                userId: '',
                blogId: '',
                commentText: '',
                countLike: ''
            }
        };
    },

    created(){
        this.blogId = this.ItBlogId
        this.TbBlogComment.blogId=this.ItBlogId
        this.getCommentList(this.blogId)
    },

    methods:{


            // 只要 onLoad 被调用，就应该请求下一页数据
        onLoad() {
        console.log('触发了 load 事件！')
        // 1. 让页码值 +1
        this.page++
        // 2. 重新请求接口获取数据
        this.initArticleList()
        },
            // 下拉刷新的处理函数
        onRefresh() {
        console.log('触发了下拉刷新！')
        // 1. 让页码值 +1
        this.pageNumber++
        // 2. 重新请求接口获取数据
        this.initArticleList(true)
        },

        show2bloComment(){
            this.show = true
        },
        toBlogComment(){
            this.TbBlogComment.commentText=this.value
            // this.$toast( this.TbComment.commentText)
                // 发布评论
            var result = BlogCommentAPI.addComment(this.TbBlogComment)
                // 发布评论
            result.then((val) => {
                if (val.success) {
                this.$toast("发布故事评论成功")
                // 提交完成后返回页面刷新
                    //  this.$router.go(0)
                this.getCommentList(this.blogId)
                }
                else {
                console.log(val.errorMsg);
                this.$toast(val.errorMsg);
                    }
            });
  
        },
        getCommentList(id) {
            var result = BlogCommentAPI.getCommentByBlogId(id)
            // 获取返回结果
            result.then((val) => {
                console.log(val);
                if (val.success) {
                    // 将数据存到list里面
                  this.list = val.data;
                  this.current = val.data.current
                  this.total =  val.data.total
                }
                else {
                    console.log(val.errorMsg);
                    this.$toast(val.errorMsg);
                }
            });
        },

        
    // getThisPage2List(){        
    //     var result = MusicAPI.AllMusic(this.pageNumber,this.pageSize)
    //   // 获取响应结果 
    //   result.then((val)=>{
    //     if(val.success){
    //       this.list=val.data.records
    //       this.current = val.data.current
    //       this.total =  val.data.total
    //       console.log(this.data);
    //       // this.$toast('上传音乐文件成功！')
    //       // this.playupload=true
    //     }else{
    //       console.log(val.errorMsg)
    //       this.$toast(val.errorMsg)
    //     }
    //         })
    // },

    },

    props:{
     ItBlogId:{
      required: true,
      type: String
        },
    }
    
}
</script>

<style>

</style>